<template>
    <div class="page">
        <div class="no-data-wrap" v-if="tableData.length == 0 && !searchQuery.name && searchQuery.enabled === null">
            <el-empty description="暂无部门">
                <el-button type="primary" @click="add(true)">创建部门</el-button>
            </el-empty>
        </div>
        <div class="flex-column" v-else>
            <div class="search-simple-wrap">
                <div class="search-simple-item" style="width:180px">
                    <el-input v-model="searchQuery.name" :prefix-icon="Search"  placeholder="搜索部门名称" @blur="search"></el-input>
                </div>
                <div class="search-simple-item" style="width:130px">
                    <el-select clearable v-model="searchQuery.enabled" placeholder="状态" @change="search">
                        <el-option v-for="(item,index) in dict.EnableEnum" :key="index" :label="item.desc" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="earch-simple-item" style="width:180px"></div>
                <el-button type="primary" :icon="Plus" style="margin-left:auto;width:124px" @click="add(false)">新增部门</el-button>
            </div>
            <div class="grid-wrap">
                <el-table style="width:100%;height:100%"
                        row-key="id"
                        :data="tableData">
                    <el-table-column label="部门名称" prop="name" width="200px" fixed></el-table-column>
                    <el-table-column label="部门人数" prop="members" width="120px"></el-table-column>
                    <el-table-column label="负责人" prop="leader"></el-table-column>
                    <el-table-column label="备注" prop="remark"></el-table-column>
                    <el-table-column label="是否启用">
                        <template #default="scope">
                            <div class="item" style="width:40px;height:32px;position:relative;" @click="handleEnable(scope.row)">
                                <el-switch v-model="scope.row.enabled"
                                    :active-value="1"
                                    :inactive-value="0"></el-switch>
                                <div style="position:absolute;width:100%;height:100%;top:0;left:0"></div>
                            </div>
                            
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="240px">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="edit(scope.row)">编辑部门</el-button>
                            <el-button style="margin-right:12px" link type="primary" size="small" @click="addChild(scope.row)">添加子部门</el-button>
                            <el-dropdown style="margin-top:2px" trigger="click" @command="handleCommand($event, scope)"> 
                                <gzg-icon name="more" color="#2770ee"></gzg-icon>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="enabled">{{scope.row.enabled == 1 ? '禁用' : '启用'}}</el-dropdown-item>
                                        <el-dropdown-item command="delete" style="color:#f56c6c">删除</el-dropdown-item>

                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </div>
        <view-dialog :dialogVisible="dialogVisible" 
                    :detail="detail"
                    :departTree="tableData" 
                    :hasNone="hasNone"
                    :state="dialogState" 
                    @success="dialogSuccess"
                    @close="dialogVisible = false"></view-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive,watch,computed, onMounted } from 'vue'
import viewDialog from './component/view-dialog/index'
import { ElMessageBox,ElMessage } from 'element-plus'
import { Plus,Search } from '@element-plus/icons-vue'

import systemStore from '@/store/modules/system'

import { getDepartList, deleteDepart, toggleDepart } from 'services/setting'

import type {Depart} from './index'

const $systemStore = systemStore()

const dialogState = ref('edit')

const dialogVisible = ref(false)

const hasNone = ref(false)

const searchQuery = reactive({
    parent_id:null,
    name:'',
    enabled:undefined
})

const detail = ref<Depart>()

const add = (val:boolean) => {
    dialogState.value = 'add'
    detail.value = undefined
    dialogVisible.value = true;
    console.log(val)
    hasNone.value = val
}

const edit = (row:Depart) => {
    dialogState.value = 'edit'
    dialogVisible.value = true
    detail.value = row
    hasNone.value = false
}

const addChild = (row:Depart) => {
    detail.value =  {
        id:undefined,
        name:'',
        parent_id:row.id,
        remark: '',
        sort:undefined,
        leader:'',
        leader_phone:'',
        enabled:undefined
    }
    dialogState.value = 'add'
    dialogVisible.value = true
    hasNone.value = false
}

const search = () => {
    getList()
}

const tableData = ref<Depart[]>([])

const getList = () => {
    getDepartList(searchQuery).then((res:any) => {
        tableData.value = res;
    })
}

const dialogSuccess = () => {
    getList();
    dialogVisible.value = false
}

const handleCommand = (command:string, scope:any) => {
    console.log(command, scope)
    switch (command) {
        case 'enabled':
            handleEnable(scope.row)
            break;
        case 'delete':
            handleDelete(scope.row)
            break;
        default:
            break;
    }
}

const handleDelete = (row:Depart) => {
    ElMessageBox.confirm('确认进行【删除】操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then((result) => {
        deleteDepart({id:row.id || undefined}).then(res => {
            getList()
            ElMessage.success('删除成功')
        })
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}

const handleEnable = (row:Depart) => {
    let enabled = row.enabled;
    ElMessageBox.confirm(`确认进行【${enabled === 1 ? '禁用' : '启用'}】操作`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        toggleDepart({
            id:row.id || undefined,
            enabled: enabled === 1 ? false : true
        }).then(res => {
            getList()
            ElMessage.success('操作成功')
        })
    }).catch(() => {
        ElMessage.info('已取消操作')
    })
}

const dict = computed<any>(() => {
    return $systemStore.dict
})

onMounted(() => {
    getList()
})
</script>
